<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
                 label-width="68px">
            <el-form-item label="商户名称" prop="sellerName">
                <el-input
                    v-model="queryParams.sellerName"
                    placeholder="请输入商户名称"
                    clearable
                    @keyup.enter.native="handleQuery"
                />
            </el-form-item>
            <el-form-item label="联系方式" prop="mobile">
                <el-input
                    v-model="queryParams.mobile"
                    placeholder="请输入联系方式"
                    clearable
                    @keyup.enter.native="handleQuery"
                />
            </el-form-item>
            <el-form-item label="联系人" prop="contacts">
                <el-input
                    v-model="queryParams.contacts"
                    placeholder="请输入联系人"
                    clearable
                    @keyup.enter.native="handleQuery"
                />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">

            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>

        <el-table v-loading="loading" :data="sellerList" @selection-change="handleSelectionChange" border>
            <el-table-column type="selection" width="55" align="center"/>
            <!--<el-table-column label="商户ID" align="center" prop="sellerId"/>
            <el-table-column label="商户图片" align="center" prop="url" width="100">
                <template slot-scope="scope">
                    <image-preview :src="scope.row.url" :width="50" :height="50"/>
                </template>
            </el-table-column>-->
            <el-table-column label="商户名称" align="center" prop="sellerName"/>
            <el-table-column label="商户电话" align="center" prop="mobile">
                <template slot-scope="scope">
                    {{ splitPhone(scope.row.mobile) }}
                </template>
            </el-table-column>
            <el-table-column label="商户联系人" align="center" prop="contacts"/>
            <el-table-column label="商户地址" align="center" prop="address" :show-overflow-tooltip="true"/>
            <el-table-column label="审核状态" align="center" prop="audit">
                <template slot-scope="scope">
                    <el-tag type="danger" v-if="scope.row.audit=='0'">待审核</el-tag>
                    <el-tag type="success" v-if="scope.row.audit=='1'">已审核</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="是否置顶" align="center" prop="audit">
                <template slot-scope="scope">
                    <el-tag type="danger" v-if="scope.row.isTop==0">否</el-tag>
                    <el-tag type="success" v-if="scope.row.isTop==1">是</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="启用状态" align="center" prop="status">
                <template slot-scope="scope">
                    <el-switch
                        v-model="scope.row.status"
                        active-value="0"
                        inactive-value="1"
                        @change="handleStatusChange(scope.row)"
                    ></el-switch>
                </template>
            </el-table-column>
            <el-table-column label="申请时间" align="center" prop="createTime" width="170px">
                    <template slot-scope="scope">
                        <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
                    </template>
            </el-table-column>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="180">
                <template slot-scope="scope">
                    <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-view"
                        @click="handleRead(scope.row)"
                        v-hasPermi="['business:seller:edit']"
                    >查看
                    </el-button>
                    <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-top"
                        @click="handleTop(scope.row)"
                        v-hasPermi="['business:seller:isTop']"
                        v-if="scope.row.isTop==0">置顶
                    </el-button>
                    <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-top"
                        @click="handleCancelTop(scope.row)"
                        v-hasPermi="['business:seller:isTop']"
                        v-if="scope.row.isTop==1">
                        <span v-if="scope.row.isTop==1">取消置顶</span>
                    </el-button>
                    <el-dropdown size="mini" @command="(command) => handleCommand(command, scope.row)"  v-hasPermi="['business:seller:audit']">
                        <el-button size="mini" type="text" icon="el-icon-d-arrow-right"  >更多</el-button>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item command="handleAudit" icon="el-icon-circle-check"
                                              v-hasPermi="['business:seller:audit']" v-if="scope.row.audit==0">审核
                            </el-dropdown-item>
                            <el-dropdown-item command="handleAccount" icon="el-icon-circle-check"
                                              v-hasPermi="['business:seller:audit']">开通账号
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </template>
            </el-table-column>
        </el-table>

        <pagination
            v-show="total>0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
        />

        <!-- 添加或修改商户申请对话框 -->
        <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
            <el-form ref="form" :model="form" :rules="rules" label-width="200px">
                <el-form-item label="商户名称" prop="sellerName" style="width: 300px">
                    <el-input v-model="form.sellerName" placeholder="请输入商户名称"/>
                </el-form-item>
                <el-form-item label="联系方式" prop="mobile">
                    <el-input v-model="form.mobile" placeholder="请输入联系方式"/>
                </el-form-item>
                <el-form-item label="联系人" prop="contacts">
                    <el-input v-model="form.contacts" placeholder="请输入联系人"/>
                </el-form-item>
                <el-form-item label="地址" prop="address">
                    <el-input v-model="form.address" placeholder="请输入商户名称"/>
                </el-form-item>
                <el-form-item label="商户简介" prop="description">
                    <el-input v-model="form.description" type="textarea" placeholder="请输入商户简介" maxlength="500"/>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>
        <el-dialog :title="title" :visible.sync="readSync" width="800px" append-to-body>
            <el-descriptions  border column="1" size="medium">
                <el-descriptions-item label="审核状态" label-class-name="my-label">
                    <el-tag type="success" v-if="form.audit=='1'">已审核</el-tag>
                    <el-tag type="danger" v-if="form.audit=='0'">待审核</el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="商户名">{{form.sellerName}}</el-descriptions-item>
                <el-descriptions-item label="联系电话">{{form.mobile}}</el-descriptions-item>
                <el-descriptions-item label="联系人">{{form.contacts}}</el-descriptions-item>
                <el-descriptions-item label="地址">{{form.address}}</el-descriptions-item>
                <el-descriptions-item label="Logo">
                    <el-image :src="form.url" style="width: 300px"></el-image>
                </el-descriptions-item>
            </el-descriptions>
        </el-dialog>
    </div>
</template>

<script>
import {
    listSeller,
    getSeller,
    sellerTop,
    sellerCancelTop,
    addSeller,
    updateSeller,
    changeSellerStatus,
    changeSellerAudit
} from "@/api/business/seller";
import {splitPhone} from "@/utils/ruoyi";

export default {
    name: "Seller",
    data() {
        return {
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 商户申请表格数据
            sellerList: [],
            // 弹出层标题
            title: "",
            // 是否显示弹出层
            open: false,
            readSync: false,
            isTopCount:0,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                sellerName: null,
                mobile: null,
                contacts: null,
                status: null,
                audit: null,
            },
            // 表单参数
            form: {},
            // 表单校验
            rules: {}
        };
    },
    created() {
        this.getList();
    },
    methods: {

        splitPhone,
        // 更多操作触发
        handleCommand(command, row) {
            switch (command) {
                //设置审核
                case "handleAudit":
                    this.handleAudit(row);
                    break;
                case "handleAccount":
                    this.handleAccount(row);
                    break
                default:
                    break;
            }
        },
        handleAccount(row) {
            if (row.audit==0) {
                this.$modal.alertError('未审核的商户不能开通账号');
                return false;
            }
            this.$confirm('是否开通账号?', "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(() => {
                this.$router.push({path:'/system/user',query:{sellerId:row.sellerId,sellerName:row.sellerName,sellerMobile:row.mobile}})
            }).catch(() => {
            });
        },
        /** 查询商户申请列表 */
        getList() {
            this.loading = true;
            listSeller(this.queryParams).then(response => {
                this.sellerList = response.rows;
                var length = this.sellerList.length;
                for (let i = 0; i < length; i++) {
                    if (this.sellerList[i].isTop==1) {
                        this.isTopCount = this.isTopCount+1;
                    }
                }
                this.total = response.total;
                this.loading = false;
            });
        },
        // 取消按钮
        cancel() {
            this.open = false;
            this.reset();
        },
        // 表单重置
        reset() {
            this.form = {
                sellerId: null,
                sellerName: null,
                address: null,
                mobile: null,
                contacts: null,
                url: null,
                description: null,
                status: null,
                audit: null,
                createBy: null,
                createTime: null,
                updateBy: null,
                updateTime: null,
                remark: null,
                isTop: null,
            };
            this.resetForm("form");
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm("queryForm");
            this.handleQuery();
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map(item => item.sellerId)
            this.single = selection.length !== 1
            this.multiple = !selection.length
        },
        /** 新增按钮操作 */
        handleAdd() {
            this.reset();
            this.open = true;
            this.title = "添加商户申请";
        },
        /** 修改按钮操作 */
        handleUpdate(row) {
            this.reset();
            const sellerId = row.sellerId || this.ids
            getSeller(sellerId).then(response => {
                this.form = response.data;
                this.open = true;
                this.title = "修改商户申请";
            });
        },
        handleRead(row) {
            this.reset();
            this.readSync = true;
            const sellerId = row.sellerId || this.ids
            getSeller(sellerId).then(response => {
                this.form = response.data;
                this.title = "查看商户";
            });
        },
        /** 提交按钮 */
        submitForm() {
            this.$refs["form"].validate(valid => {
                if (valid) {
                    if (this.form.sellerId != null) {
                        updateSeller(this.form).then(response => {
                            this.$modal.msgSuccess("修改成功");
                            this.open = false;
                            this.getList();
                        });
                    } else {
                        addSeller(this.form).then(response => {
                            this.$modal.msgSuccess("新增成功");
                            this.open = false;
                            this.getList();
                        });
                    }
                }
            });
        },

        handleTop(row){
            if (row.audit==0) {
                this.$modal.alertError("未审核的商户不能置顶");
                return false;
            }
            const topTxt = '是否确认将商户' + row.sellerName + '置顶？';
            this.$modal.confirm(topTxt).then(function () {
                return sellerTop(row.sellerId,1);
            }).then(() => {
                row.isTop = 1;
                this.$modal.msgSuccess("置顶成功");
            }).catch(() => {
                row.isTop = 1;
            });
        },
        handleCancelTop(row) {
            if (row.audit==0) {
                this.$modal.alertError("未审核的商户不能置顶");
                return false;
            }
            const topTxt = '是否确认将商户' + row.sellerName + '取消置顶？';
            this.$modal.confirm(topTxt).then(function () {
                return sellerCancelTop(row.sellerId,0);
            }).then(() => {
                row.isTop = 0;
                this.$modal.msgSuccess("取消置顶成功");
            }).catch(() => {
                row.isTop = 0;
            });
        },
        handleAudit(row) {
            if (row.audit==1) {
                this.$modal.alertError('该商户已经审核了');
                return false;
            }
            this.$modal.confirm('确认要审核通过这个商户嘛？').then(function () {
                return changeSellerAudit(row.sellerId, 1);
            }).then(() => {
                this.$modal.msgSuccess(text + "成功");
            }).catch(function () {
                row.audit = row.audit === "0" ? "1" : "0";
            });
        },
        /** 导出按钮操作 */
        handleExport() {
            this.download('business/seller/export', {
                ...this.queryParams
            }, `seller_${new Date().getTime()}.xlsx`)
        },
        handleStatusChange(row) {
            let text = row.status === "0" ? "启用" : "禁用";
            this.$modal.confirm('确认要' + text + row.sellerName + '这个商户嘛？').then(function () {
                return changeSellerStatus(row.sellerId, row.status);
            }).then(() => {
                this.$modal.msgSuccess(text + "成功");
            }).catch(function () {
                row.status = row.status === "0" ? "1" : "0";
            });
        },
    }
};
</script>
<style>
.my-label {
    width: 100px;
}
</style>
